<template>
  <div class="chart-container">
    <h3>月度销售额（柱状图）</h3>
    <BaseChart :option="option" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BaseChart from './BaseChart.vue'

const option = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value',
    name: '销售额（万）'
  },
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: [15, 23, 36, 42, 30, 45],
      itemStyle: {
        color: '#5470c6'
      },
      label: {
        show: true,
        position: 'top'
      }
    }
  ]
})
</script>

<style scoped>
.chart-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

h3 {
  margin-bottom: 15px;
  color: #333;
}
</style>